<template>
  <div id="group">
    <div class="headbox">聊天室</div>
    <div class="leftbox">
        <el-scrollbar ref="myScrollbar" style="height: 400px;" class="scrollbox">
            <div :class="item.left?'conbox':'conbox rightbox'" v-for="(item,index) in msgList" :key="index">
                <img class="reference" :src="item.imgurl" alt="">
                <div class="textbox">
                    <span class="time">{{item.createdAt}}</span>
                    <p v-html="item.message"></p>
                </div>
            </div>
            <!-- <div class="conbox">
                <img class="reference" src="../assets/images/user2.jpg" alt="">
                <div class="textbox">
                    <span class="time">2014-10-17</span>
                    <p>sfsdfasfsdfsfasfdafsfsaf</p>
                </div>
            </div> -->
            
            
        </el-scrollbar>
        <div class="footbottom">
            <div class="biaoqing" v-if="visible">
                <emotion @emotion="handleEmotion" :height="200" ></emotion>
            </div>
            <div class="iconbox">
                <i class="el-icon-user" @click="visible=true"></i>
            
            </div>
            <el-scrollbar  style="height: 80px;">
                <chartInput ref="chatInput" v-model="editorText"  @submit="msageSubmit"/>
            </el-scrollbar>
            <div class="buttonbox" style="text-align: right;">
                <el-button size="mini">关闭(C)</el-button>
                <el-dropdown size="mini" @click="msageSubmit" split-button type="primary">
                    发送(S)
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>按Enter发送消息</el-dropdown-item>
                        <el-dropdown-item>按Ctrl + Enter发送消息</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
    <div class="rightboxlxl">
        <ul>
            <li v-for="(item,index) in userList" :key="index">
                <img :src="imgurl + item.imgurl" alt=""><span>{{item.name}}</span>
            </li>
        </ul>
    </div>

  </div>
</template>

<script>

import { commonMixin } from "../config/mixin";
import chartInput from '../components/chatInput'
import Emotion from '../components/Emotion/index'
import API from "../api/api";
import serverUrl from '../config/client'
import { mapGetters, mapActions } from "vuex";

export default {
  name: "group",
  mixins: [commonMixin],
  components: { chartInput ,Emotion},
  data(){
    return {
        editorText:'',
        visible:false,
        friendId:'',
        msgList:[],
        userList:[],
        imgurl:''
    }
  },
  created(){
       
  },
  computed: {
    ...mapGetters(["getuserInfo"])
  },
  mounted(){
    this.imgurl = serverUrl
    // 加入房间
    this.socket.emit('join', this.getuserInfo);
       
        
    //监听系统消息
    this.socket.on('sys', (sysMsg, users)=> {
        console.log(users)
        this.userList = users
        this.$message({
            type:'info',
            message:sysMsg
        })
    });
	//监听消息
    this.socket.on('msg',  (user, msg)=> {
        var obj ={
            left:true,
            imgurl:serverUrl + user.imgurl,
            createdAt:new Date(),
            message:msg,
        }
        this.msgList.push(obj)
        this.$nextTick(()=>{
            this.scrollDown();
        })
    });
    
  },
  destroyed(){
      this.socket.emit('leave');
  },
  methods: {
        scrollDown() {
            this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
        },
            
        msageSubmit(){
        this.socket.send(this.editorText);
        },
        handleEmotion(i){
            this.content = i
            var html = this.content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, this.emotion)
            var objE = document.createElement("span");
        　　 objE.innerHTML = html;
        　　 
            this.visible=false
            this.$refs.chatInput.insertHtmlAtCaret(objE.childNodes)
        },
        // 将匹配结果替换表情图片
        emotion (res) {
            let word = res.replace(/\#|\;/gi,'')
            const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极']
            let index = list.indexOf(word)
            return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
        },

    }
};
</script>
<style >
.el-scrollbar__wrap {
    overflow-x: hidden !important;
}
.el-scrollbar__bar {
    display: none;
}
.textbox >p >div{
    display: none !important;
}
</style>
<style lang='scss' scoped>

#group {
    width: 100%;
    height: 100%;
    position: relative;
    .headbox {
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        border-bottom:1px solid #eee;
        
    }
    .leftbox {
        overflow: hidden;
        display: inline-block;
        width: 560px;
    }
    .rightboxlxl {
        width: 200px;
         display: inline-block;
         vertical-align: top;
         ul {
            margin: 0;
            list-style: none;
            img {
                width: 50px;
                height: 50px;
                vertical-align: middle;
                padding-right: 10px;
            }
            
         }
    }
    .conbox {
        // overflow: hidden;
        padding: 5px 5px;
        .reference {
        //    float: left;
            width: 50px;
            height: 50px;
            padding: 0 10px;
        }
        .textbox {
            // float: left;
            width: 476px;
            display: inline-block;
            vertical-align: top;
            // margin-left: 70px;
            // margin-right: 70px;
            span {
                display: block;
                text-align: center;
                font-size: 12px;
                color: #666;
            }
            p{
                font-size: 14px;
                line-height: 28px;
                padding: 0 5px;
                background-color: rgba($color: #92bce0, $alpha: 5);
                border-radius: 4px;
                display: inline-block;
                // margin: 0;
               box-shadow: 5px 5px 5px rgba(0,0,0,.5);

                
            }
        }
    }
    .rightbox {
        width: 200px;
        img{
            float: right;
        }
        .textbox {
            text-align: right;
            p{
                background-color: rgba($color: #7af172, $alpha: 5);
                
            }
        }
    }
    .footbottom {
        position: fixed;
        bottom: 0;
        border-top:1px solid #eee;
        width: 100%;
        .biaoqing {
            background-color: #fff;
            border-radius: 5px;
            position: absolute;
            bottom: 158px;
            left: 10px;
        }
        .iconbox {
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
            background: #fff;
            z-index: 1;
            padding: 10px 20px;
            i {
                cursor: pointer;
                padding: 0 10px;
                font-size: 18px;
            }
        }
        .buttonbox  {
            padding: 10px 10px;
        }
        // right: 0;
    }
}

</style>
